---
title: Descendants | gluestack-ui
description: gluestack-ui provides an easy API to style children of the components.
---

import {
  GluestackUIProvider,
  Text,
  Center,
  Button,
  Box,
  ButtonText,
} from '@gluestack-ui/themed';
import { transformedCode, transformedThemedCode } from '../../../utils';
import Wrapper from '../../../components/Wrapper';

import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
} from '@gluestack/design-system';
import { Meta } from '@storybook/addon-docs';

<Meta title="ui/Home/Styling/Descendants" />

# Descendants

We can provide context based descendant styling with the help of gluestack-ui, i.e we can apply styles to the children of a component from the parent component.

In the below example we are applying styles to ButtonText by passing styles `_text` property in the `sx` prop of Button component.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
       <Box justifyContent="center" alignItems="center" h="100%">
        <Box alignItems="center">
          <Button $_text-color="red">
            <ButtonText>Button</ButtonText>
          </Button>
        </Box>
      </Box>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Text,
        Button,
        Box,
        ButtonText,
      },
      argsType: {},
    }}
  />
</AppProvider>

<br />

Expo snack link for the above example is provided [here](https://snack.expo.dev/@gluestack/gluestack-ui-descendant-styles).